<template>
	<view>
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="20">
			<view class="pB15 mL15 mR15">
				<view v-for="(item,i) in list" :key="i" class="messageItem" @click="jumpSetRead(item)">
					<view class="flex jst-between alg-center">
						<view class="font14 bold relative sysTitle relative" :class="item.messageState!=1?'active':''">
							{{item.titile}}</view>
						<view class="t-right  font12 u-6">{{toText(item.createTime)}}</view>
					</view>
					<view class="txt-ellipsis">
						{{item.messageContent}}
					</view>
				</view>
			</view>
		</mescroll-uni>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getSysMsg
	} from "@/api/common.js"
	import {
		toTimeText
	} from "@/utils/common/date.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					pageSize: 10,
					pageNo: 1
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: []
			};
		},
		onShow(e) {
			this.mescroll && this.mescroll.triggerDownScroll()
		},
		methods: {
			toText(val) {
				if (val) {
					return toTimeText(val)
				} else {
					return ''
				}

			},
			jumpSetRead(item) {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				// 将要传递的数据存储在当前页面实例上
				currentPage.dataToPass = item;
				uni.navigateTo({
					url: '/pages/common/systemMsg/index'
				});
			},
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				this.query.pageNo = page.num;
				getSysMsg(this.query).then(res => {
					console.log(res)
					let list = res.result.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);


				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})

			},
		}
	};
</script>

<style lang="scss">
	page {
		/* #ifdef MP-USER */
		background: linear-gradient(0deg, #F8FAFF, #E1EEFF);
		/* #endif */
		/* #ifdef MP-COMPANY */
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
		/* #endif */
		/* #ifdef MP-ECONOMIC */
		background: linear-gradient(0deg, #F8FAFF, #EBFCFF);
		/* #endif */
	}
</style>
<style scoped lang="scss">
	.messageItem {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		margin-bottom: 20rpx;

		.sysTitle {
			&.active {
				padding-left: 10rpx;

				&:before {
					content: "";
					position: absolute;
					width: 16rpx;
					height: 16rpx;
					left: -10rpx;
					top: 14rpx;
					border-radius: 50%;
					background-color: #3C9CFF;
				}
			}
		}
	}
</style>